const path = require("path");
const webpack = require("webpack");
//只要是插件都要引入
const htmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry:path.join(__dirname,"./src/main.js"),
  output:{
  	path:path.join(__dirname,"./dist"),
  	filename:"bundle.js"
  },
  plugins:[
    //当设置这个插件后，会在生成的页面中导入bundle.js，这里会在由src下index.html生成的index.html
    //中导入bundle.js
    new htmlWebpackPlugin({
    	//指定模板页面，去生成内存中的页面
    	template:path.join(__dirname,"./src/index.html"),
    	//生成的页面（内存中）
    	filename:"index.html"
    }),
    new VueLoaderPlugin()
  ],
  module:{
  	rules:[
  	  {test:/\.css$/,use:["style-loader","css-loader"]},
  	  {test:/\.less$/,use:["style-loader","css-loader","less-loader"]},
  	  {test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]},
  	  {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:"url-loader?limit=7631&name=[hash:8]-[name].[ext]"},
  	  {test:/\.(ttf|eot|svg|woff|woff2|otf)$/,use:"url-loader"},
  	  {test:/\.js$/,use:"babel-loader",exclude:/node_modules/},
  	  {test:/\.vue$/,use:"vue-loader"}
  	]
  },
  resolve:{//webpack中使用vue，要这样设置，不然导入的vue为runtime模式，功能不全，出错
  	       //要把import vue的路径改掉（默认路径在node_modules/vue下的package.json中main项设置）
  	       //或者直接import Vue from "./node_modules/vue/dist/vue.js"
  	alias:{//import Vue from "vue";
  		"vue$":"vue/dist/vue.js"
  	}
  }
}